<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>播放</title>
</head>
<style>
  #app{
    width: 100%;
    text-align: center;
    margin-top: 100px;
  }
</style>
<body>
  <div id="app">
  <video id="video" controls="controls">
  </video>
  </div>
</body>
  
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('${M3U8Url}');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>
</html>